<!DOCTYPE html>

<html>
	<head>
		<link rel="stylesheet" href="../../../themes/themeroller/default-theme/ui.all.css" type="text/css" media="screen" />

		<script src="../../../lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>

		<script src="../../../src/defaults.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../src/core.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css" media="screen">

			body {
				padding: 0 10px;
				font-size: 14px;
				font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
				max-width: 640px;
			}

		</style>
		
	</head>

	<body>

		<div id="menu"></div>

		<script type="text/javascript" charset="utf-8">
		
			if (window.widget) {
				widget.setNavigationEnabled(false);
			}

			var init = function() {
			
				var tabs = new Nokia.IconicMenu({
					element: '#menu',
					items: [
						{
							label: "favorites",
							icon: 'images/icon1.png',
							select: function(item, event) {
								alert('Iconic Menu Clicked on: ' + item.label);
							}
						},
						{
							label: "e-mails",
							icon: 'images/icon2.png',
							select: function(item, event) {
								alert('Iconic Menu Clicked on: ' + item.label);
							}
						},
						{
							label: "chat",
							icon: 'images/icon3.png',
							select: function(item, event) {
								alert('Iconic Menu Clicked on: ' + item.label);
							}
						},
						{
							label: "trash",
							icon: 'images/icon4.png',
							select: function(item, event) {
								alert('Iconic Menu Clicked on: ' + item.label);
							}
						},
						{
							label: "save",
							icon: 'images/icon5.png',
							select: function(item, event) {
								alert('Iconic Menu Clicked on: ' + item.label);
							}
						},
						{
							label: "gallery",
							icon: 'images/icon6.png',
							select: function(item, event) {
								alert('Iconic Menu Clicked on: ' + item.label);
							}
						},
						{
							label: "drafts",
							icon: 'images/icon7.png',
							select: function(item, event) {
								alert('Iconic Menu Clicked on: ' + item.label);
							}
						},
						{
							label: "history",
							icon: 'images/icon8.png',
							select: function(item, event) {
								alert('Iconic Menu Clicked on: ' + item.label);
							}
						},
						{
							label: "past",
							icon: 'images/icon9.png',
							select: function(item, event) {
								alert('Iconic Menu Clicked on: ' + item.label);
							}
						},
						{
							label: "Allert",
							icon: 'images/icon10.png',
							select: function(item, event) {
								alert('Iconic Menu Clicked on: ' + item.label);
							}
						},
						{
							label: "label",
							icon: 'images/icon1.png',
							select: function(item, event) {
								alert('Iconic Menu Clicked on: ' + item.label);
							}
						},
						{
							label: "search",
							icon: 'images/icon2.png',
							select: function(item, event) {
								alert('Iconic Menu Clicked on: ' + item.label);
							}
						}
					]
				});
				
				/*
				 * Hide splash when its all done.
				*/
				
				Nokia.hideSplash();
					
			};
			
			/*
			 * Show splash while loading components.
			*/
				
			Nokia.showSplash('<span>loading</span>');
			
			Nokia.use('iconicmenu', init);

		</script>

	</body>
</html>